<!DOCTYPE html>
<html>

<head>
	<meta charset='UTF-8'>
	<title>单位转换器</title>
	<meta name="description" content="单位转换器">
	<meta name="author" content="邢栋">
	<link rel="icon" type="image/x-ico" href="icon192.jpeg">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="renderer" content="webkit">
	<meta name="force-rendering" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<script>/*@cc_on window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>
</head>

<body>
	<a href="https://github.com/xclala/convertdegree">
		<img src="../github.svg">
	</a>
	<br>
	<p></p>
	<p></p>
	<a href="..">🔙<br></a>
	<h1>单位转换器</h1>
	<form align="center">
		<select id="selectoption" onchange="onselectoption()">
			<option value="temperture">温度</option>
			<option value="heavy">重量</option>
			<option value="area">面积</option>
			<option value="power">功率</option>
			<option value="pressure">压强</option>
		</select>
		<p></p>
		<input id="x" onkeyup="convert_temperture('C')" placeholder="摄氏度" type="number">
		<label id="m1">°C</label>
		<p></p>
		<input id="y" onkeyup="convert_temperture('F')" placeholder="华氏度" type="number">
		<label id="m2">°F</label>
		<p></p>
		<input id="z" onkeyup="convert_temperture('K')" placeholder="开尔文" type="number">
		<label id="m3">K</label>
		<p></p>
		<div align="center"><button type="reset">清空</button></div>
		<script>
			function onselectoption() {
				let index = document.getElementById("selectoption").selectedIndex
				let selectedoption = document.getElementById("selectoption").options[index].value
				switch (selectedoption) {
					case "temperture":
						document.getElementById("x").onkeyup = function () { convert_temperture('C') }
						document.getElementById("x").placeholder = "摄氏度"
						document.getElementById("y").onkeyup = function () { convert_temperture('F') }
						document.getElementById("y").placeholder = "华氏度"
						document.getElementById("z").onkeyup = function () { convert_temperture('K') }
						document.getElementById("z").placeholder = "开尔文"
						document.getElementById("m1").innerHTML = "°C"
						document.getElementById("m2").innerHTML = "°F"
						document.getElementById("m3").innerHTML = "K"
						break
					case "heavy":
						document.getElementById("x").onkeyup = function () { convert_heavy('K') }
						document.getElementById("x").placeholder = "千克"
						document.getElementById("y").onkeyup = function () { convert_heavy('P') }
						document.getElementById("y").placeholder = "磅"
						document.getElementById("z").onkeyup = function () { convert_heavy('O') }
						document.getElementById("z").placeholder = "盎司"
						document.getElementById("m1").innerHTML = "千克"
						document.getElementById("m2").innerHTML = "磅"
						document.getElementById("m3").innerHTML = "盎司"
						break
					case "area":
						document.getElementById("x").onkeyup = function () { convert_area('SK') }
						document.getElementById("x").placeholder = "平方千米"
						document.getElementById("y").onkeyup = function () { convert_area('H') }
						document.getElementById("y").placeholder = "公顷"
						document.getElementById("z").onkeyup = function () { convert_area('A') }
						document.getElementById("z").placeholder = "英亩"
						document.getElementById("m1").innerHTML = "平方千米"
						document.getElementById("m2").innerHTML = "公顷"
						document.getElementById("m3").innerHTML = "英亩"
						break
					case "power":
						document.getElementById("x").onkeyup = function () { convert_power('KW') }
						document.getElementById("x").placeholder = "千瓦"
						document.getElementById("y").onkeyup = function () { convert_power('W') }
						document.getElementById("y").placeholder = "瓦特"
						document.getElementById("z").onkeyup = function () { convert_power('HP') }
						document.getElementById("z").placeholder = "马力"
						document.getElementById("m1").innerHTML = "千瓦"
						document.getElementById("m2").innerHTML = "瓦特"
						document.getElementById("m3").innerHTML = "马力"
						break
					case "pressure":
						document.getElementById("x").onkeyup = function () { convert_pressure('P') }
						document.getElementById("x").placeholder = "帕斯卡"
						document.getElementById("y").onkeyup = function () { convert_pressure('MMHG') }
						document.getElementById("y").placeholder = "毫米汞柱"
						document.getElementById("z").onkeyup = function () { convert_pressure('AP') }
						document.getElementById("z").placeholder = "大气压"
						document.getElementById("m1").innerHTML = "帕斯卡"
						document.getElementById("m2").innerHTML = "毫米汞柱"
						document.getElementById("m3").innerHTML = "大气压"
				}
			}
			function convert_temperture(degree) {
				let temp1;
				let temp2;
				if (degree == "C") {
					temp1 = Math.abs(document.getElementById("x").value) * 9 / 5 + 32;
					temp2 = Math.abs(document.getElementById("x").value) + 273.15
					document.getElementById("y").value = Math.round(temp1 * 100) / 100;//四舍五入到百分位
					document.getElementById("z").value = Math.round(temp2 * 100) / 100;//四舍五入到百分位
				} else if (degree == "F") {
					temp1 = (Math.abs(document.getElementById("y").valu) - 32) * 5 / 9;
					temp2 = temp1 + 273.15;
					document.getElementById("x").value = Math.round(temp1 * 100) / 100;//四舍五入到百分位
					document.getElementById("z").value = Math.round(temp2 * 100) / 100;//四舍五入到百分位
				} else {
					temp1 = Math.abs(document.getElementById("z").value) - 273.15;
					temp2 = temp1 * 9 / 5 + 32;
					document.getElementById("x").value = Math.round(temp1 * 100) / 100;//四舍五入到百分位
					document.getElementById("y").value = Math.round(temp2 * 100) / 100;//四舍五入到百分位
				}
			}
			function convert_heavy(degree) {
				let temp1;
				let temp2;
				if (degree == "K") {
					temp1 = Math.abs(document.getElementById("x").value) * 2.204623;
					temp2 = temp1 * 16;
					document.getElementById("y").value = Math.round(temp1 * 100) / 100;//四舍五入到百分位
					document.getElementById("z").value = Math.round(temp2 * 100) / 100;//四舍五入到百分位
				} else if (degree == "P") {
					temp1 = Math.abs(document.getElementById("y").value) / 2.204623
					temp2 = Math.abs(document.getElementById("y").value) * 16
					document.getElementById("x").value = Math.round(temp1 * 100) / 100;//四舍五入到百分位
					document.getElementById("z").value = Math.round(temp2 * 100) / 100;//四舍五入到百分位
				} else {
					temp1 = Math.abs(document.getElementById("z").value) / 16 / 2.204623;
					temp2 = temp1 / 16
					document.getElementById("x").value = Math.round(temp1 * 100) / 100;//四舍五入到百分位
					document.getElementById("y").value = Math.round(temp2 * 100) / 100;//四舍五入到百分位
				}
			}

			function convert_power(degree) {
				let temp1;
				let temp2;
				if (degree == "KW") {
					temp1 = Math.abs(document.getElementById("x").value) * 1000;
					temp2 = temp1 * 0.001341;
					document.getElementById("y").value = Math.round(temp1 * 100) / 100;//四舍五入到百分位
					document.getElementById("z").value = Math.round(temp2 * 100) / 100;//四舍五入到百分位
				} else if (degree == "W") {
					temp1 = Math.abs(document.getElementById("y").value) / 1000;
					temp2 = temp1 * 1.341022;
					document.getElementById("x").value = Math.round(temp1 * 100) / 100;//四舍五入到百分位
					document.getElementById("z").value = Math.round(temp2 * 100) / 100;//四舍五入到百分位
				} else {
					temp1 = Math.abs(document.getElementById("z").value) / 1000 / 0.001341;
					temp2 = temp1 * 0.001341
					document.getElementById("x").value = Math.round(temp1 * 100) / 100;//四舍五入到百分位
					document.getElementById("y").value = Math.round(temp2 * 100) / 100;//四舍五入到百分位
				}
			}

			function convert_area(degree) {
				let temp1;
				let temp2;
				if (degree == "SK") {
					temp1 = Math.abs(document.getElementById("x").value) * 100;
					temp2 = temp1 * 2.471054;
					document.getElementById("y").value = Math.round(temp1 * 100) / 100;//四舍五入到百分位
					document.getElementById("z").value = Math.round(temp2 * 100) / 100;//四舍五入到百分位
				} else if (degree == "H") {
					temp1 = Math.abs(document.getElementById("y").value) / 100;
					temp2 = temp1 * 2.471054;
					document.getElementById("x").value = Math.round(temp1 * 100) / 100;//四舍五入到百分位
					document.getElementById("z").value = Math.round(temp2 * 100) / 100;//四舍五入到百分位
				} else {
					temp1 = Math.abs(document.getElementById("z").value) / 100 / 247.1054;
					temp2 = temp1 * 100
					document.getElementById("x").value = Math.round(temp1 * 100) / 100;//四舍五入到百分位
					document.getElementById("y").value = Math.round(temp2 * 100) / 100;//四舍五入到百分位
				}
			}

			function convert_pressure(degree) {
				let temp1;
				let temp2;
				if (degree == "P") {
					temp1 = Math.abs(document.getElementById("x").value) * 0.007502;
					temp2 = temp1 * 0.00001;
					document.getElementById("y").value = Math.round(temp1 * 100) / 100;//四舍五入到百分位
					document.getElementById("z").value = Math.round(temp2 * 100) / 100;//四舍五入到百分位
				} else if (degree == "MMHG") {
					temp1 = Math.abs(document.getElementById("y").value) / 0.007502;
					temp2 = temp1 * 0.007502 * 0.00001;
					document.getElementById("x").value = Math.round(temp1 * 100) / 100;//四舍五入到百分位
					document.getElementById("z").value = Math.round(temp2 * 100) / 100;//四舍五入到百分位
				} else {
					temp1 = Math.abs(document.getElementById("z").value) / 0.007502 / 0.00001;
					temp2 = temp1 * 0.00001
					document.getElementById("x").value = Math.round(temp1 * 100) / 100;//四舍五入到百分位
					document.getElementById("y").value = Math.round(temp2 * 100) / 100;//四舍五入到百分位
				}
			}
		</script>
	</form>
	<style>
		@media(prefers-color-scheme:dark) {
			body {
				background-color: #111114;
			}

			h1,
			label {
				color: white;
			}

			a {
				color: orangered;
			}
		}

		@media(prefers-color-scheme:light) {
			body {
				background-color: whitesmoke;
			}

			h1,
			label {
				color: black;
			}

			a {
				color: blue;
			}
		}

		h1,
		label {
			text-align: center;
		}

		html {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			text-rendering: optimizeLegibility;
		}

		a {
			text-decoration-line: none;
		}

		a:hover {
			font-weight: bolder;
		}
	</style>
	<script>
		window.onload = function () {
			const BACKGROUNDCOLOR = ['#111114', 'whitesmoke']
			const TEXTCOLOR = ['white', 'black']
			const LINKCOLOR = ['orangered', 'blue']
			let c = 0
			document.getElementsByTagName("h1")[0].onclick = function () {
				document.body.style.backgroundColor = BACKGROUNDCOLOR[c % 2]
				document.getElementsByTagName("h1")[0].style.color = TEXTCOLOR[c % 2]
				let x = document.getElementsByTagName("a")
				for (let i = 0; i < x.length; i++) {
					x[i].style.color = LINKCOLOR[c % 2]
				}
				c++
			}
		}
	</script>
	<a href="qrcode.png">二维码<br></a>
</body>

</html>